<template>
  <div class="form-cell">
    <van-field
      readonly
      clickable
      :required="required"
      name="picker"
      :value="pickerValue"
      :label="label"
      :placeholder="placeholder || '请选择'"
      @click="showBlank"
      right-icon="arrow"
      :rules="rules"
    />
    <van-popup v-model="showPicker" position="bottom" :loading="loading">
      <van-picker
        ref="picker"
        show-toolbar
        :columns="columns"
        value-key="regionName"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        @change="onchange"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  props: [
    "label",
    "value",
    "placeholder",
    "option",
    "required",
    "target",
    "rules",
  ],
  data() {
    return {
      pickerValue: "",
      showPicker: false,
      columns: [{ values: [] }, { values: [] }, { values: [] }],
      loading: false,
      result: [],
      labelJson: {
        1: "",
        2: "",
      },
    };
  },
  watch: {
    value() {
      if (this.value && this.value.length) {
        this.pickerValue = this.value.map((item) => item.regionName).join("-");
        this.result = JSON.parse(JSON.stringify(this.value));
        return;
      }
      this.pickerValue = "";
    },
  },
  methods: {
    onchange(picker, value) {
      if (value[0].regionCode != this.labelJson[1]) {
        this.getColumnsChild(value[0].regionCode, 1, picker);
      } else if (value[1].regionCode != this.labelJson[2]) {
        this.getColumnsChild(value[1].regionCode, 2, picker);
      }
    },
    onConfirm(label) {
      let value = label.map((item) => {
        return {
          regionCode: item.regionCode,
          regionName: item.regionName,
        };
      });
      this.pickerValue = label.map((item) => item.regionName).join("-");
      this.$emit("input", value);
      this.showPicker = false;
    },
    getColumnsChild(regionCode, level, picker) {
      this.loading = true;
      this.$axios
        .get(serverAddress + "/region/list", {
          regionCode,
        })
        .then((res) => {
          this.labelJson[level] = regionCode;
          let column = res;
          this.columns[level] = { values: column };
          if (picker) {
            picker.setColumnValues(level, column);
          }
          if (level < 2) {
            this.getColumnsChild(column[0].regionCode, level + 1, picker);
          } else {
            this.loading = false;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    showBlank() {
      this.showPicker = true;
      if (this.columns[0].values.length == 0) {
        this.loading = true;
        this.$axios
          .get(serverAddress + "/region/province")
          .then((res) => {
            if (this.target) {
              this.columns[0] = {
                values: res.filter((ele) => ele.regionName == "陕西省"),
              };
            } else {
              this.columns[0] = { values: res };
            }
            this.$nextTick(() => {
              this.$refs.picker.setColumnValues(0, this.columns[0].values);
              this.getColumnsChild(
                this.columns[0].values[0].regionCode,
                1,
                this.$refs.picker
              );
            });
          })
          .catch((err) => {
            this.loading = false;
          });
      }
    },
  },
  mounted() {
    // 用来回显数据
    if (this.value && this.value.length) {
      this.pickerValue = this.value.map((item) => item.regionName).join("-");
      this.result = JSON.parse(JSON.stringify(this.value));
    }
  },
};
</script>
